import { ref, defineComponent, watch } from "vue";
import { NModal } from "naive-ui";

export default defineComponent({
  name: "basic-model",
  props: {
    show: {
      type: Boolean,
      default: true,
    },
  },
  emits: ["update:show"],
  setup(props, { slots, emit }) {
    console.log("===组件渲染===");
    // const showModal = ref(true);
    const openHandle = (event: boolean) => {
      console.log("点击===", event);
      emit("update:show", event);
      // showModal.value = true;
      // props.show;
    };

    watch(
      () => props.show,
      (value) => {
        console.log("====show监听===", value);
      }
    );
    return () => (
      <div>
        <NModal
          show={props.show}
          preset="dialog"
          title="Dialog"
          on-update:show={openHandle}
        >
          {/* 插槽的使用 */}
          {{
            header: () => <div>标题</div>,
            action: () => "操作",
            default: () => "内容",
          }}
        </NModal>
      </div>
    );
  },
});
